<template>
  <div class="block">
    <el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="(item,i) in banner" :key="i">
        <div class="mydiv">
          <img :src="item.imgUrl" />
          <h4 class="text">{{item.text}}</h4>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getlunbo } from "@/api";
import { mapState, mapMutations } from "vuex";//引入vuex中的state和mutations，这里要将vuex中的数据和执行函数都拿过来
export default {
  data() {
    return {
      // banner: [],
    };
  },
  computed: {
    ...mapState(["banner"]), // 获取得到的banner就是this.banner
  },
  methods: {//此处就是调用vuex中写好的函数
    ...mapMutations(["changeBanner"]), // 这里就是用vuex中写好的函数，将请求到的数据存储起来
  },
  mounted() {
    // getlunbo().then((res) => {
    //   if (res.type) {
    //     this.banner = res.result;
    //   }
    // });
    if (!this.banner) {
      getlunbo().then((res) => {
        if (res.type) {
          // this.banner = res.result;
          this.changeBanner(res.result);
        }
      });
    }
  },
};
</script>

<style lang="scss">
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.mydiv {
  width: 100%;
  position: relative;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
  .text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-size: 50px;
    color: rgb(218, 132, 132);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>